import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:situation/app/theme/app_theme.dart';
import 'package:situation/app/theme/gaps.dart';
import 'package:situation/data/store/config_store.dart';
import 'package:situation/resources/assets.dart';
import 'package:situation/shared/util/util_mk.dart';
import 'package:situation/widgets/PlayVideo.dart';
import 'package:situation/widgets/mk_cell.dart';
import 'package:situation/widgets/mk_empty.dart';
import 'package:situation/widgets/mk_load_image.dart';
import 'package:situation/widgets/mk_scroll_view.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:timelines_plus/timelines_plus.dart';

import 'controller.dart';
import 'state.dart';

class IntellInfoTimelinePage extends StatefulWidget {
  const IntellInfoTimelinePage({Key? key}) : super(key: key);

  @override
  State<IntellInfoTimelinePage> createState() => _IntellInfoTimelinePageState();
}

class _IntellInfoTimelinePageState extends State<IntellInfoTimelinePage> {
  final IntellInfoTimelineController controller = Get.put(
    IntellInfoTimelineController(),
  );
  final IntellInfoTimelineState state =
      Get.find<IntellInfoTimelineController>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TDNavBar(title: '情报时间轴'),
      body: EasyRefresh(
        onRefresh: controller.onRefresh,
        onLoad: controller.onLoad,
        child: Obx(
          () => MkScrollView(
            bottomButton: Center(
              child: TDButton(
                onTap: controller.toTimeLimeUpload,
                width: Get.width * 0.9,
                text: '上报',
                type: TDButtonType.fill,
                theme: TDButtonTheme.primary,
              ),
            ),

            padding: EdgeInsets.all(16),
            children: [
              MkCell(title: '类型', note: '${state.intellDetail['typeStr']}'),
              MkCell(title: '位置', note: '${state.intellDetail['position']}'),
              MkCell(title: '联系方式', note: '${state.intellDetail['phone']}'),

              MkCell(title: '备注', note: '${state.intellDetail['remark']}'),
              MkCell(title: '附件信息'),
              state.intellDetail['annexs'] == null
                  ? Container()
                  : Container(
                    alignment: Alignment.centerLeft,
                    child: Wrap(
                      alignment: WrapAlignment.start,
                      spacing: 8,
                      children: [
                        ...state.intellDetail['annexs'].map((e) {
                          return _buildImageBox(e);
                        }).toList(),
                      ],
                    ),
                  ),
              MkCell(title: '时间轴'),
              Visibility(visible: state.timeLine.length == 0, child: MkEmpty()),
              FixedTimeline.tileBuilder(
                theme: TimelineTheme.of(context).copyWith(
                  nodePosition: 0,
                  indicatorTheme: TimelineTheme.of(
                    context,
                  ).indicatorTheme.copyWith(size: 20.0, position: 0),
                ),
                builder: TimelineTileBuilder.fromStyle(
                  contentsAlign: ContentsAlign.basic,
                  contentsBuilder:
                      (context, index) => Padding(
                        padding: const EdgeInsets.all(24.0),
                        child: _buildTimeLineItem(index),
                      ),
                  itemCount: state.timeLine.length,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildImageBox(e) {
    return e['type'] == 1
        ? GestureDetector(
          onTap: () {
            TDImageViewer.showImageViewer(
              context: context,
              images: [ConfigStore.to.baseFileUrl + e['path']],
            );
          },
          child: Stack(
            children: [
              MkLoadImage(
                ConfigStore.to.baseFileUrl + e['path'],
                width: (Get.width - 60) / 4,
                height: (Get.width - 60) / 4,
              ),
            ],
          ),
        )
        : GestureDetector(
          onTap: () {
            UtilMk.openBottomSheet(
              480,
              "视频",
              Container(
                height: 400,
                clipBehavior: Clip.hardEdge,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    AppTheme.iDefaultRadius * 2,
                  ),
                ),
                child: PlayVideo(url: ConfigStore.to.baseFileUrl + e['path']),
              ),
            );
          },
          child: Stack(
            alignment: Alignment.center,
            children: [
              MkLoadImage(
                ConfigStore.to.baseFileUrl + e['coverImg'],
                width: (Get.width - 60) / 4,
                height: (Get.width - 60) / 4,
              ),
              Icon(Icons.play_circle, color: Colors.blueAccent),
            ],
          ),
        );
  }

  @override
  void dispose() {
    Get.delete<IntellInfoTimelineController>();
    super.dispose();
  }

  _buildTimeLineItem(int index) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "${UtilMk.formatDateTimeYMDHIS(state.timeLine[index].createTime)}",
          style: TextStyle(fontSize: 12),
        ),
        Gaps.vGap4,
        Text(
          "${state.timeLine[index].content}",
          style: TextStyle(fontSize: 14),
        ),
        Gaps.vGap4,
        state.timeLine[index].annexList.isEmpty
            ? Container()
            : Container(
              height: (state.timeLine[index].annexList.length / 3).ceil() * 160,
              child: GridView.count(
                physics: NeverScrollableScrollPhysics(),
                crossAxisCount: 3,
                mainAxisSpacing: 8,
                crossAxisSpacing: 8,
                // 每行三个项
                children: List.generate(
                  state.timeLine[index].annexList.length, // 生成9个项
                  (i) => ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child:
                        state.timeLine[index].annexList[i].type == 1
                            ? MkLoadImage(
                              ConfigStore.to.baseFileUrl +
                                  state.timeLine[index].annexList[i].path,
                            )
                            : GestureDetector(
                              onTap: () {
                                UtilMk.openBottomSheet(
                                  480,
                                  "视频",
                                  Container(
                                    height: 400,
                                    clipBehavior: Clip.hardEdge,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(
                                        AppTheme.iDefaultRadius * 2,
                                      ),
                                    ),
                                    child: PlayVideo(
                                      url:
                                          ConfigStore.to.baseFileUrl +
                                          state
                                              .timeLine[index]
                                              .annexList[i]
                                              .path,
                                    ),
                                  ),
                                );
                              },
                              child: Stack(
                                alignment: Alignment.center,
                                children: [
                                  MkLoadImage(
                                    ConfigStore.to.baseFileUrl +
                                        state
                                            .timeLine[index]
                                            .annexList[i]
                                            .coverImg!,
                                  ),
                                  Icon(
                                    Icons.play_circle,
                                    color: Colors.blueAccent,
                                  ),
                                ],
                              ),
                            ),
                  ),
                ),
              ),
            ),
      ],
    );
  }
}
